<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<link href="/admin/public/bootstrap.min.css" title="" rel="stylesheet" />
<link href="/admin/public/inspinia.css" rel="stylesheet" />
<link href="/admin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />
<link href="/admin/public/animate.css" rel="stylesheet" />
<link
	href="/admin/css/plugins/datetimepicker/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen" />
<link href="/admin/public/zTree/css/zTreeStyle/zTreeStyle.css"
	rel="stylesheet" />
<link href="/admin/js/multipleselect/multiple-select.css"
	rel="stylesheet" />
<link rel="stylesheet" href="/admin/css/Tab_swiper.css" />
<link rel="stylesheet" href="/admin/css/new_page_if.css" />
<link rel="stylesheet" type="text/css"
	href="${request.getContext }/admin/css/xcConfirm.css" />
<script src="/admin/My97/WdatePicker.js"></script>
<!-- 百度编译器 -->
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="/admin/js/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/admin/js/ueditor.all.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="/admin/public/html5shiv.min.js"></script>
	<script src="/admin/public/respond.min.js"></script>
<![endif]-->
<style>
th.prev {
	background: url(img/dateleft.png) -3px !important;
}

th.next {
	background: url(img/dateright.png) -10px !important;
}
.img{
	height: 130px;
	width:180px;
}
</style>
</head>
<body>
	<div
		style="width: 20px; height: 100%; position: relative; left: 16px; box-shadow: -5px 0 20px #8e9092;">
	</div>
	<div class="container-frame-detail" id="containerDetail"
		style="display: block; right: 0px; width: 780px; position: relative; bottom: 100%; left: 16px; height: 100%;">
		<div class="detail-inner" id="detailInner">
			<div class="slid-panel-header clearfix">
				<span class="panel-title">修改卡片</span> <span onclick="quxiao();" class="form-close-icon">X</span>
			</div>
			<div class="detail_left">
				<div class="detail_left_inner">

					<!-- <div class="cus_simple_info">
                        <div class="tagSelector-warp">
                            <div class="tag-item-list">
                                <span class="tag-inputContainer"><span class="span-tag">+标签</span> </span>
                                <div class="tag-pullDown-container-down">
                                </div>
                            </div>
                        </div>
                    </div>-->
					<div class="customer_tabs fn-clear"
						style="margin-right: 30px; margin-left: 10px;">
						<ul class="detail_main_nav">
							<li><a class="slide-panel-tab slide_nav_hover"
								href="javascript:void(0)">修改卡片</a></li>
						</ul>
						<div class="detail_panels_main_body">
							<div id="renWu_msg" class="active">
								<form id="editCard" method="post" enctype="multipart/form-data" class="form-horizontal">
									<input type="hidden" name="cardId" id="cardId"
										value="${card.cardId }">
										<div style="overflow: hidden;">
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">
													卡片名称：</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<input type="text" class="form-control" id="cardName"
														name="cardName" value="${card.cardName }">
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">卡片类型：</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<select class="select2_demo_1 form-control" name="cardTypeId"
														id="cardTypeId">
														<option value="">--请选择--</option>
														<option value="1" ${card.cardTypeId=='1'?'selected':'' }>月卡</option>
														<option value="2" ${card.cardTypeId=='2'?'selected':'' }>私教卡</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">
													卡片金额：</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<input type="text" class="form-control" id="qian"
														name="qian" value="${card.qian }">
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">
													卡片有效期(天)：</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<input type="text" class="form-control" id="timer"
														name="timer" value="${card.timer }">
												</div>
											</div>
											<div id="ccs" class="form-group" style="display:${card.cardTypeId=='1'?'none':'' } ">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">
													使用次数：</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<input type="text" class="form-control" id="period"
														name="period" value="${card.period }">
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">背景图片:</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<input type="file" class="form-control" id="picUrl"
														name="picUrl" value="${card.picUrl }" onchange="preview(this,1)">
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label"></label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<span style="color:red;">建议图片尺寸：640*214</span>
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label"></label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<div id="preview1">
														<img src="${card.picUrl }" alt="" />
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">关联门店:</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<c:forEach items="${tlist }" var="item">
														<input type="checkbox" style="width: 60px"
															value="${item.shopId }" name="shopId" />
														<span>${item.shopName }</span>
													</c:forEach>
												</div>
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">卡片注意事项:</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<script id="editor2" type="text/plain" name="zysx"  style="width:504px;height:200px;">${card.zysx }</script>
												</div>
												<input type="hidden" value="${card.shopId }" id="cardHidden" />
											</div>
											<div class="form-group">
												<label class="col-lg-2 col-md-2 col-sm-3 control-label">卡片描述:</label>
												<div class="col-md-6 col-lg-6 col-sm-6">
													<script id="editor1" type="text/plain" name="jianjie"  style="width:504px;height:200px;">${card.jianjie }</script>
												</div>
												<input type="hidden" value="${card.shopId }" id="cardHidden" />
											</div>
										</div>
							</div>
							<a class="show-more-info">查看更多</a>
							<div class="hr-line-dashed"></div>
							<input type="button" onclick="editCard();"
								style="width: 82px; height: 34px; margin-left: 12px" value="保存"
								class="col-lg-3 btn btn-success" />
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<script src="/admin/public/jquery-1.11.3.js"></script>
	<script src="/admin/js/plugins/lhgdialog/lhgdialog.js"></script>
	<!-- 时间控件样式 -->
	<script
		src="/admin/js/plugins/datetimepicker/bootstrap-datetimepicker.min.js"></script>
	<script
		src="/admin/js/plugins/datetimepicker/bootstrap-datetimepicker-update.min.js"></script>
	<script
		src="/admin/js/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
	<!-- 弹出框 -->
	<script src="/admin/js/multipleselect/multiple-select.js"></script>
	<script src="${request.getContext }/admin/js/xcConfirm.js"
		type="text/javascript" charset="utf-8"></script>
	<!--    <script src="/admin/js/Tab_swiper.js"></script>-->
	<script src="/admin/js/new_page_if.js"></script>
	<script src="/admin/js/jquery.form.min.js"></script>
	<script type="text/javascript">
	function quxiao(){
		window.parent.location.href="/admin/user/cardlist"
	}
		function preview(file, i) {
			var prevDiv = document.getElementById('preview' + i);
			if (file.files && file.files[0]) {
				var reader = new FileReader();
				reader.onload = function(evt) {
					prevDiv.innerHTML = '<img class="img" src="' + evt.target.result + '" />';
				}
				reader.readAsDataURL(file.files[0]);
			} else {
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
			}
		}
	</script>
	<script>
	$("#cardTypeId").change(function(){
		if($("#cardTypeId").val()==1){
			$("#ccs").hide();
		}
		if($("#cardTypeId").val()==2){
			$("#ccs").show();
		}
	})
	
	$(function() {
		window.onload = function() {
			var checkeds = $("#cardHidden").val();
			if (checkeds.length > 0) {
				var roleArr = checkeds.split(',');
				$.each(roleArr, function(index, roleid) {
					$("input[type=checkbox][name='shopId']").each(
							function() {
								if ($(this).val() == roleid) {
									$(this).attr("checked", true);
								}
							});
				});
			}
		};
	});

	function check() {
		var cardName = $("#cardName").val();
		var cardTypeName=$('#cardTypeId option:selected') .val();//选中的值
		var qian = $("#qian").val();
		var timer = $("#timer").val();
		var period = $("#period").val();
		var shoplength = $("input[name='shopId']:checked").length;
		if (cardName.length == 0) {
			alert('请输入卡片名称！');
			return false;
		}
		if (cardTypeName == "") {
			alert('请选择卡片类型！');
			return false;
		}
		if (qian.length == 0) {
			alert('请输入卡片金额！');
			return false;
		}
		if (cardTypeName==2&&period.length == 0) {
			alert('请输入卡片使用次数！');
			return false;
		}
		if (timer.length == 0) {
			alert('请输入卡片有效期！');
			return false;
		}
		if (shoplength == 0) {
			alert('请选择门店！');
			return false;
		}  
		return true;
	}
		function editCard() {
			if (check()) {
				var spCodesTemp = "";
			      $('input:checkbox[name="shopId"]:checked').each(function(i){
			       if(0==i){
			        spCodesTemp = $(this).val();
			       }else{
			        spCodesTemp += (","+$(this).val());
			       }
			      });
			      $('#editCard').ajaxSubmit({
					type : "post",
					data :{
						"cardName":$("#cardName").val(),
						"cardTypeId":$("#cardTypeId option:checked").val(),
						"qian":$("#qian").val(),
						"timer":$("#timer").val(),
						"period":$("#period").val(),
						"shopIds":spCodesTemp,
						"jianjie":UE.getEditor('editor1').getContent(),
						"zysx":UE.getEditor('editor2').getContent()
					},
					dataType : "json",
					enctype:"multipart/form-data",
					url : "/admin/user/editCard",
					success : function(data) {
						window.wxc.xcConfirm(
								data.msg,
								window.wxc.xcConfirm.typeEnum.info,
								{
									onOk : function() {
										if (data.success) {
											window.parent.location.href = "/admin/user/cardlist";
										}
									}
								})
								
					},
					error : function(data) {
						alert("您没有权限修改卡片信息！");
					}
				});
						
			}
		}
	</script>
	<script type="text/javascript">
		var ue=UE.getEditor('editor1');
		var ue=UE.getEditor('editor2');
	</script>
</body>
</html>
